import React, { Fragment, useState, useEffect } from 'react';
import type { FC } from 'react';
import { Calendar, Badge, Drawer } from 'antd';
import style from './index.less';
import { Link, useHistory } from 'umi';
import { PieChart } from 'bizcharts';
import { articleCount } from './service';
const Choose: FC<Record<string, any>> = () => {
  const history = useHistory();
    // 数据源（各类别图书总数）
  const data = [
    {
      type: '前端',
      value: 27,
    },
    {
      type: '后端',
      value: 25,
    },
    {
      type: '人工智能',
      value: 18,
    },
    {
      type: '机器学习',
      value: 15,
    },
    {
      type: '数据可视化',
      value: 10,
    },
    {
      type: 'React',
      value: 5,
    },
  ];
  const [pvData, setPvData] = useState([]);
  const fetchPv = async () => {
    const { data } = await articleCount({});
    setPvData(data);
  };
  useEffect(() => {
    fetchPv();
  }, []);
  return (
    <div className={style.cal}>
        <PieChart
          data={pvData}
          title={{
            visible: true,
            text: '各类文章数量占比',
            style:{color:'rgb(28,156,254)'}
          }}
          radius={0.5}
          // width={300}
          // height={300}
          angleField='count'
          colorField='type'
          label={{
            visible: true,
            type: 'spider',
            labelHeight: 28,
            content: v => `${v.type}\n`
          }}
        />
    </div>

  );
};
export default Choose;
